import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';

import './index.scss';

const LogisticsCompany = ({ dispatch, logisticsCompanyList = [] }) => {
  useEffect(() => {
    dispatch({
      type: 'otherApi/getLogisticsCompanyModel',
      payload: {},
    });
  }, []);

  const handleSelect = (item) => {
    dispatch({
      type: 'otherApi/setSelectedLogisticsCompany',
      payload: item,
    });
    Taro.navigateBack();
  };

  return (
    <View className="logisticsCompany flex-column--center">
      {logisticsCompanyList.length > 0 &&
        logisticsCompanyList.map((logistics) => {
          return (
            <View
              className="logistics flex-row--center txt28 black085"
              onClick={() => handleSelect(logistics)}
              key={logistics.id}
            >
              {logistics.name}
            </View>
          );
        })}
    </View>
  );
};

export default connect(({ otherApi }) => ({
  logisticsCompanyList: otherApi.logisticsCompanyList,
}))(LogisticsCompany);
